<template>
  <view class="content">
    <view class="app-title acs">
      <view class="fl" @click="back"
        ><image class="back" src="/static/img/back.png"></image></view
      >我的工单
      <text @click="showCons" class="right-title">施工管理</text>
    </view>
    <!-- <view class="search-date" v-show="show_date">
      <b>{{ start }} - {{ end }}</b
      ><view class="fr" @click="show_date = false"
        ><image class="close" src="/static/img/coolicon.png"></image
      ></view>
    </view> -->

    <view class="my-work ac">
      <view class="fl menu ac" v-for="(item, index) in workList" :key="item"
        ><view :class="{ on: tab == index }" @click="setTab(index)"
          ><b>{{ item }}</b></view
        ><view v-show="tab == index" class="num ac">{{
          workNum[index] > 99 ? "99+" : workNum[index]
        }}</view>
      </view>

      <view class="fl menu ac" @click="show_search = true"
        ><view
          >筛选<image class="select" src="/static/img/select.png"></image></view
      ></view>

      <view class="clearfix"></view>
    </view>

    <view class="work-item">
      <view
        class="item"
        @click="jumpDetail(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        <view class="name"
          ><b>{{ item.detailedContent || "" }}</b></view
        >
        <view
          ><text class="f-opactiy">工单编号：</text>{{ item.woSn || "" }}</view
        >
        <!-- <view><text class="f-opactiy">类型：</text>检修工单<text class="f-opactiy" style="margin-left:30px;">周期：</text>{{item.gdcycle}}天/次</view> -->
        <view
          ><text class="f-opactiy">发布时间：</text
          >{{ item.releaseTime || "" }}</view
        >
        <text class="item-status">{{ item.woState || "" }}</text>
        <!-- <image
          v-show="item.woState == null"
          src="/static/img/untreated.png"
          class="item-status"
        ></image>
        <image
          v-show="item.woState == '进行中'"
          src="/static/img/undone.png"
          class="item-status"
        ></image>
        <image
          v-show="item.woState == '发布'"
          src="/static/img/over.png"
          class="item-status"
        ></image> -->
      </view>
      <!-- <view class="item">
				<view class="name"><b>龙阳路站更换岔道</b></view>
				<view><text class="f-opactiy">类型：</text>检修工单<text class="f-opactiy" style="margin-left:30px;">周期：</text>15天/次</view>
				<view><text class="f-opactiy">时间：</text>2021-08-06 12:37:09</view>
				<image src="/static/img/undone.png" class="item-status"></image>
			</view>
			<view class="item">
				<view class="name"><b>龙阳路站更换岔道</b></view>
				<view><text class="f-opactiy">类型：</text>检修工单<text class="f-opactiy" style="margin-left:30px;">周期：</text>15天/次</view>
				<view><text class="f-opactiy">时间：</text>2021-08-06 12:37:09</view>
				<image src="/static/img/over.png" class="item-status"></image>
			</view> -->
    </view>

    <MyWorkSearch
      v-show="show_search"
      :tab="tab"
      @closeFull="closeFull"
      :title="'工单查询'"
    ></MyWorkSearch>
  </view>
</template>

<script>
import MyWorkSearch from "../../components/myWork/myWorkSearch";
export default {
  components: { MyWorkSearch },
  data() {
    return {
      workList: ["全部", "未处理", "未完成", "已完成"],
      workNum: [0, 0, 0, 0],
      list: [],
      tab: 0,
      start: "",
      end: "",
      show_search: false,
      show_date: false,
      page: 0,
      flog: false,
    };
  },
  onReachBottom() {
    if (!this.flog)
      return uni.showToast({ title: "已无最新数据", icon: "none" });
    this.initList({});
  },
  created() {
    this.initList({});
  },
  methods: {
    showCons() {
      uni.navigateTo({
        url: "/pages/constrationWork/index",
      });
    },
    back() {
      uni.navigateBack();
    },
    setTab(i) {
      if (this.tab == i) return;
      this.tab = i;

      this.page = 0;
      // this.flog = true;
      this.list = [];
      this.initList({});
    },
    jumpDetail(id) {
      uni.navigateTo({
        url: "/pages/myWork/workDetail?id=" + id.woSn,
      });
    },
    closeFull(obj) {
      this.initList(obj);
      this.show_search = false;
    },
    getCondition() {
      let obj = { woState: "" };
      if (this.tab == 0) {
        obj = { woState: "" };
      }
      if (this.tab == 1) {
        obj = { woState: "草稿,已提交" };
      }
      if (this.tab == 2) {
        obj = {
          woState: "进行中,发布,准备中,接单,审批中,返工,退回派单",
        };
      }

      if (this.tab == 3) {
        obj = { woState: "已完成" };
      }
      return obj;
    },
    initList(val1) {
      let obj = this.getCondition();
      let woState = val1.woState ? val1.woState : obj.woState;
      let val = { ...obj, ...val1, pageNum: 1, pageSize: 100000, woState };
      this.fetch(
        "GET",
        this.baseUrl() + "/api/pms/work/getPmsWoinforByPage",
        val,
        true
      ).then((res) => {
        if (res.returnCode.startsWith("200")) {
          this.list = res.data.content.map((i) => {
            return { ...i };
          });
          this.workNum = this.workNum.map((i, index) => {
            let r = i;
            if (index == this.tab) {
              r = res.data.content.length;
            }
            return r;
          });

          this.page++;
          if (res.data.content.length != 10) this.flog = false;
        }
      });
    },
  },
};
</script>

<style scoped>
.acs {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.right-title {
  font-size: 10px;
}
.my-work {
  background: #fff;
  margin-bottom: 16px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}
.my-work > .menu {
  width: 19%;
  color: #3e3a39;
  line-height: 54px;
  position: relative;
}
.my-work > .menu:nth-child(5) {
  border-left: 1px solid #d7d7d7;
  width: 24%;
}
.my-work > .menu view {
  display: inline-block;
}
.my-work > .menu > .on {
  color: #307be0;
  border-bottom: 2px solid #307be0;
}
.my-work > .menu > .num {
  position: absolute;
  top: 10px;
  right: 3%;
  background: #fa5151; /* width: 15px; */
  height: 15px;
  font-size: 10px;
  border-radius: 50%;
  color: #fff;
  line-height: 14px;
  padding: 0 5px;
}
.select {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  vertical-align: middle;
}
.work-item {
  width: 91.5%;
  margin: 0 auto;
}
.work-item > .item {
  background: #ffffff;
  box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 16px;
  font-size: 14px;
  margin-bottom: 16px;
  color: #3e3a39;
  position: relative;
}
.work-item > .item > .name {
  margin-bottom: 10px;
}
.work-item > .item > view:nth-child(2) {
  margin-bottom: 6px;
}
.item-status {
  position: absolute;
  width: 60px;
  right: 0%;
  bottom: 17px;
  text-align: center;
}
.search-date {
  line-height: 40px;
  background: rgba(237, 150, 59, 0.1);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
  padding: 0 16px;
}
.search-date .close {
  width: 13px;
  height: 13px;
}
</style>
